<template>
    <div>
        <el-steps :active="1" simple>
            <el-step title="学生自评申请"></el-step>
            <el-step title="班级审核"></el-step>
            <el-step title="班内公示"></el-step>
            <el-step title="学院复审"></el-step>
            <el-step title="学校核定"></el-step>
        </el-steps>
        <div style="width: 60%;">
            <el-descriptions title="" :column=3 :colon=false style="margin-top:5%">
                <el-descriptions-item label="自评分数：">100</el-descriptions-item>
                <el-descriptions-item label="班委评分：">100</el-descriptions-item>
                <el-descriptions-item label="综测班级排名：">4</el-descriptions-item>

                <el-descriptions-item label=''></el-descriptions-item>
            </el-descriptions>
            <div style="position:absolute;right:-100px;top:0" class="shenhe">{{status}}</div>
        </div>

        <!-- 各项分数表格 -->
        <div style="display: flex;flex-direction: column; height: 100%;margin-top: 30px;">
            <!-- 智育分 -->
            <template class="form1" style="flex:1;">
                <span style="width: 100%">
                    <h3 style="font-size: 15px; float: left;">“智育分”（60%）模块综合评定</h3>
                    <h3 class="code">模块班委评分：67</h3>
                    <h3 class="code">模块自评分：80</h3>
                </span>
                <el-table :data="ZyData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width:942px">
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xxName" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="contentSm" label="内容说明" width="250">
                    </el-table-column>
                    <el-table-column prop="eviMat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sugScore" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zySelfScore" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zyBwScore" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zyNewTime" label="更新时间" width="100">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">评分</el-button>
                            <el-button type="text" size="small">通过</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="ZyData.length">
                    </el-pagination>
                </div>
            </template>

            <!-- 德育分 -->
            <template class="form1" style="flex: 1;">
                <span style="width: 100%">
                    <h3 style="font-size: 15px;float: left;">“德育分”（20%）模块综合评定</h3>
                    <h3 class="code">模块班委评分：67</h3>
                    <h3 class="code">模块自评分：80</h3>
                </span>
                <el-table :data="DyData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width:942px">
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xxName" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="contentSm" label="内容说明" width="250">
                    </el-table-column>
                    <el-table-column prop="eviMat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sugScore" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="dySelfScore" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="dyBwScore" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="dyNewTime" label="更新时间" width="100">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">评分</el-button>
                            <el-button type="text" size="small">通过</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="ZyData.length">
                    </el-pagination>
                </div>
            </template>

            <!-- 体育分 -->
            <template class="form1" style="flex: 1;">
                <span style="width: 100%">
                    <h3 style="font-size: 15px;float: left;">“体育分”（10%）模块综合评定</h3>
                    <h3 class="code">模块班委评分：67</h3>
                    <h3 class="code">模块自评分：80</h3>
                </span>

                <el-table :data="TyData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width:942px">
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xxName" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="contentSm" label="内容说明" width="250">
                    </el-table-column>
                    <el-table-column prop="eviMat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sugScore" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="tySelfScore" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="tyBwScore" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="tyNewTime" label="更新时间" width="100">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">评分</el-button>
                            <el-button type="text" size="small">通过</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="ZyData.length">
                    </el-pagination>
                </div>
            </template>

            <!-- 劳育分 -->
            <template class="form1" style="flex: 1;">
                <span style="width: 100%">
                    <h3 style="font-size: 15px;float: left;">“劳育分”（5%）模块综合评定</h3>
                    <h3 class="code">模块班委评分：67</h3>
                    <h3 class="code">模块自评分：80</h3>
                </span>

                <el-table :data="LyData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width:942px">
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xxName" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="contentSm" label="内容说明" width="250">
                    </el-table-column>
                    <el-table-column prop="eviMat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sugScore" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="lySelfScore" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="lyBwScore" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="lyNewTime" label="更新时间" width="100">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">评分</el-button>
                            <el-button type="text" size="small">通过</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="ZyData.length">
                    </el-pagination>
                </div>
            </template>

            <!-- 美育分 -->
            <template class="form1" style="flex: 1;">
                <span style="width: 100%">
                    <h3 style="font-size: 15px;float: left;">“美育分”（5%）模块综合评定</h3>
                    <h3 class="code">模块班委评分：67</h3>
                    <h3 class="code">模块自评分：80</h3>
                </span>
                <el-table :data="MyData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width:942px">
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xxName" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="contentSm" label="内容说明" width="250">
                    </el-table-column>
                    <el-table-column prop="eviMat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sugScore" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="mySelfScore" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="myBwScore" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="myNewTime" label="更新时间" width="100">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">评分</el-button>
                            <el-button type="text" size="small">通过</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="ZyData.length">
                    </el-pagination>
                </div>
            </template>
        </div>
    </div>

</template>

<script>
export default {
    name: 'Examine',
    data() {
        return {
            status: '审核中',
            dialogVisiable: false,
            form: {},
            loading: true,
            ZyData: [{
                xxName: '智育基本分',
                contentSm: '学习成绩',
                eviMat: '查看附件',
                sugScore: 4,
                zySelfScore: 100,
                zyBwScore: 100,
                zyNewTime: '2021.10.10',
                zyStatus: '已审核'
            }

            ],
            DyData: [{

                xxName: '德育基本分',
                contentSm: '学习成绩',
                eviMat: '查看附件',
                sugScore: 4,
                dySelfScore: 100,
                dyBwScore: 100,
                dyNewTime: '2021.10.10',
                dyStatus: '已审核'
            }
            ],
            TyData: [{

                xxName: '体育基本分',
                contentSm: '学习成绩',
                eviMat: '查看附件',
                sugScore: 4,
                tySelfScore: 100,
                tyBwScore: 100,
                tyNewTime: '2021.10.10',
                tyStatus: '已审核'

            }
            ],
            MyData: [{

                xxName: '美育基本分',
                contentSm: '学习成绩',
                eviMat: '查看附件',
                sugScore: 4,
                mySelfScore: 100,
                myBwScore: 100,
                myNewTime: '2021.10.10',
                myStatus: '已审核'
            }
            ],
            LyData: [{

                xxName: '劳育基本分',
                contentSm: '学习成绩',
                eviMat: '查看附件',
                sugScore: 4,
                lySelfScore: 100,
                lyBwScore: 100,
                lyNewTime: '2021.10.10',
                lyStatus: '已审核'
            }
            ],
            paginations: {
                // 默认显示第几页
                currentPage: 1,
                // 个数选择器（可修改）
                pageSizes: [1, 2, 3, 4],
                // 默认每页显示的条数（可修改）
                PageSize: 4,
            },
            num: 6,
            curPage: 1
        }
    },
    methods: {
        handleClick(row) {
            console.log(row)
        },
         // 每页显示多少条
         handleSizeChange(val) {
            // 改变每页显示的条数
            this.paginations.PageSize = val
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.paginations.currentPage = 1
            // console.log(`每页 ${val} 条`);
        },
        // 现在显示当前页的第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.paginations.currentPage = val
            // console.log(`当前页: ${val}`);
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}?`);
        },
        submitData() {

        }
    },
    mounted() {
      let length1 = 0
      let Sum = 0
      this.$axios.get(`http://localhost:/self/selectZyData/${window.sessionStorage.getItem("ckStuNum")}`, { usernum: this.usernum }).then(res => {
        if (res.status === 200) {
          this.ZyData = res.data
          for (let item = 0; item < res.data.length; item++) {
            Sum = Sum + res.data[item].zyBwScore
          }
          length1 += res.data.length

        } else {
          return '请求失败'
        }
      })
      this.$axios.get(`http://localhost:/self/selectDyData/${window.sessionStorage.getItem("ckStuNum")}`, { usernum: this.usernum }).then(res => {
        if (res.status === 200) {
          this.DyData = res.data
          length1 += res.data.length
          for (let item = 0; item < res.data.length; item++) {
            Sum = Sum + res.data[item].dyBwScore
          }
        } else {
          return '请求失败'
        }
      })
      this.$axios.get(`http://localhost:/self/selectMyData/${window.sessionStorage.getItem("ckStuNum")}`, { usernum: this.usernum }).then(res => {
        if (res.status === 200) {
          this.MyData = res.data
          length1 += res.data.length
          for (let item = 0; item < res.data.length; item++) {
            Sum = Sum + res.data[item].myBwScore
          }
        } else {
          return '请求失败'
        }
      })
      this.$axios.get(`http://localhost:/self/selectLyData/${window.sessionStorage.getItem("ckStuNum")}`, { usernum: this.usernum }).then(res => {
        if (res.status === 200) {
          this.LyData = res.data
          length1 += res.data.length
          for (let item = 0; item < res.data.length; item++) {
            Sum = Sum + res.data[item].lyBwScore
          }
        } else {
          return '请求失败'
        }
      })
      this.$axios.get(`http://localhost:/self/selectTyData/${window.sessionStorage.getItem("ckStuNum")}`, { usernum: this.usernum }).then(res => {
        if (res.status === 200) {
          this.TyData = res.data
          length1 += res.data.length
          for (let item = 0; item < res.data.length; item++) {
            Sum = Sum + res.data[item].tyBwScore
          }
        } else {
          return '请求失败'
        }
        // console.log(Sum, length1)
        this.Class_com_score = Sum / length1
      })
    },
}
</script>
        <!-- data(){
            return{
                content:"Hello world",
                sdata:''
            }
        },
        methods:{
            // getdata(){
            //     this.$axios.get('http://127.0.0.1/api/get').then(res=>{
            //         this.sdata = res.data
            //     })
            // },
            // postData(){
            //     this.$axios.post('http://127.0.0.1/api/post',{
            //     }).then(res=>{
            //         console.log(res);
            //     })

            // }
        }
    }

</script> -->
<style lang="less" scoped>
.left {
    float: left;
    /* margin-top: 40px; */
}

// style="font-size: 15px; float: right;border: 1px solid #ccc;background-color: #ccc;color: #fff;margin-left: 5px;height: 30px;width: 150px;line-height: 30px;
.code {
    font-size: 15px;
    float: right;
    border: 1px solid #ccc;
    margin-left: 5px;
    height: 30px;
    width: 150px;
    line-height: 30px;
    text-align: center;
}

.right {
    position: absolute;
    top: 6.5%;
    right: -66%;
    font-family: “Microsoft YaHei”;
}

.shenhe {
    width: 180px;
    height: 50px;
    font-size: 14px;
    color: #fff;
    background-color: blue;
    /* background-color: rgb(243, 234, 234); */
    text-align: center;
    line-height: 50px;
    margin-bottom: 4px;
    border: 2px solid #ccc;
    /* box-shadow: 5px 5px 5px #ccc; */
}

.form1 {
    width: 80%;
}

.dialog_input2 {
    width: 31%;
}

.select_first {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    outline: medium
}

.rank {
    display: inline-block;
    padding: 4px;
    font-size: 14px;
    background-color: skyblue;
}

.add {
    /* position: absolute; */
    /* width: 10%; */
    height: 3.5%;
    margin-bottom: -45px;
    /* text-align: center; */
    /* font-size: 14px; */
    /* line-height: 40px; */
    /* margin-bottom: 4px; */
    /* border: 2px solid #ccc; */
    /* position: absolute;background-color:blue;color: aliceblue; font-size: 16px; margin-bottom: -40px; */
}
</style>


